<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }

        .web{
            width: 1000px;
            height: 1500px;
            background-color: #CCCCCC;
            border: #666666 1px solid;
            margin: 0 auto;
        }

        .web1{
            width: 1000px;
            height: 1500px;
            background-color: greenyellow;
            border: #666666 1px solid;
            margin: 0 auto;
        }

        /*对联广告样式*/
        #ad1,#ad2{
            position: fixed;
            top:50px;
            width:100px;
            height: 200px;
            background-image: url(img/ad1.jpg);

        }
        #ad1{left: 0;}/*靠左*/
        #ad2{right:0 ;}/*靠右*/
        /*弹窗广告样式*/
        #ad3{
            height:250px ;
            width:300px ;
            background-image: url(img/ad2.jpg);
        }
        /*关闭按钮图片样式*/
        #close,#close1{

            width: 50px;
            height:15px ;
            object-fit: cover;
            position: absolute;
            bottom:0;
            right:0;
            background-image: url(img/close.png);
            background-repeat:no-repeat;
            background-size:cover;
            background-position:center center;
        }

        #close3{
            width: 50px;
            height:15px ;
            object-fit: cover;
            position: absolute;
            top:0;
            right:0;
            background-image: url(img/close.png);
            background-repeat:no-repeat;
            background-size:cover;
            background-position:center center;
        }
    </style>
</head>
<body>
<div>
    <div id="ad1">
        <div id="close" ></div>
    </div>
    <div class="web"></div>
    <div class="web1"></div>
    <div id="ad2">
        <div id="close1" ></div>
    </div>
    <div id="ad3" style="position: fixed;right: 0;bottom:-300px">
        <div id="close3"></div>
    </div>
</div>
</body>
<script type="text/javascript">
    var close=document.querySelector("#close");
    var close1=document.querySelector("#close1");
    var close3=document.querySelector("#close3");
    var ad1=document.getElementById('ad1');
    var ad2=document.getElementById('ad2');
    var ad3=document.getElementById('ad3');
    //关闭左边
    close.onclick=function(){
        ad1.style.display="none";
        ad2.style.display="none";
    }
    //关闭右边
    close1.onclick=function(){
        ad1.style.display="none";
        ad2.style.display="none";
    }
    //关闭弹窗广告
    close3.onclick=function(){
        ad3.style.display="none";
    }

    var virus = setInterval(up,20);

    //广告缓慢弹出效果
    function up(){
        var speed = 2;
        var bottom = parseInt(ad3.style.bottom) + speed;
        ad3.style.bottom = bottom + "px";
        if(bottom >= 0){
            clearInterval(virus);
        }
    }

</script>
</html>